
let diagram;let canvas,panel_body;let context;
let canvasWidth=500,canvasHeight=300;
let start_x=11,start_y=16,
    interval_w=30,step_h,
    unit_w=180,unit_h=100,
    arc_r=10;
let blankColor="rgba(57,57,57,0.56)",    enableColor="#00ff00",
    toOperatorLevel,isSolved,isConfirmed,
    stateList,unitNum;
let unitStep=unit_w+interval_w;
console.log("Using Diagram2.js ");
function showDiagram(){
    if(!diagram)init_element();
    if(diagram.open)diagram.close();
    else {
        drawDiagram();
        diagram.show()
    }
}
function drawDiagram(change=true){

    if(change){
        setFlowState();
    }
    let times=new Date().toLocaleString();

    canvasWidth=start_x*2+unitStep*unitNum-interval_w;
    canvasHeight=start_y*2+unit_h;

    refreshDiagram();//确定好画布情况后开始准备画布


    for(let i=0;i<unitNum;i++){
        let btnColor = stateList[i].btn,
            titleMsg = stateList[i].msg,
            name =     stateList[i].name+"XXX";
        addUnit(start_x+unitStep*i,start_y,[name,titleMsg,times],btnColor);
    }

    //context.rect(0,0,canvasWidth,canvasHeight);
    context.lineWidth=5;
    changeColor(context,enableColor);
    context.moveTo(start_x+unit_w/2,start_y+unit_h/2);//绿横线
    context.lineTo(start_x+unitStep*unitNum-unit_w,start_y+unit_h/2);
    context.stroke();

    changeColor(context,blankColor);
    for(let i=1;i<unitNum;i++) {
        let ind=i,xx=start_x+unitStep*ind;
        triangle(context, xx, start_y+unit_h/2, 15, 7,0,enableColor);
    }
}
function addUnit(x,y,text,tClass="success",message=null,titleMsg=null){
    x+=14;y+=13;
    let unit=document.createElement("button");
    let alignList=["left","center","right"];
    unit.style.width=unit_w.toString()+"px";unit.style.height=unit_h.toString()+"px";
    for(let i=0;i<3;i++){
        let _elem=document.createElement("p");_elem.style.textAlign=alignList[i];
        _elem.innerText=text[i];
        unit.appendChild(_elem);
    }
    unit.type="button";
    unit.classList.add("btn");
    unit.classList.add("btn-"+tClass);
    unit.style.position="fixed";
    unit.style.cursor="default";
    unit.style.opacity="1";
    unit.style.left=x.toString()+"px";
    unit.style.top=y.toString()+"px";
    unit.style.display="block";
    unit.setAttribute("disabled","disabled");
    diagram.children[0].appendChild(unit);

}
function refreshDiagram(){
    let panel_body=diagram.children[0];
    panel_body.innerHTML="";//清空之前的子节点
    canvas=document.createElement("canvas");
    canvas.style.width = canvasWidth.toString()+"px";
    canvas.style.height=canvasHeight.toString()+"px";
    canvas.width=canvasWidth;canvas.height=canvasHeight;
    canvas.style.verticalAlign="middle";
    panel_body.appendChild(canvas);
    context=canvas.getContext("2d");
}
// let numCharacter=['一','二','三','四','五','六','七','八','九','十'];
// let btnClass=       ["default",    "warning",       "danger",       "info",     "success",  "primary",   "success"];
// let titleMsgList=   ["提交问题",    "提交下一级",    "自动提交时间",  "处理中",   "已解决",    "等待用户确认",  "用户已确认"];
let processState={
    submit:         {btn:"default", msg:"提交问题",      name:"用户"},
    manualTransfer: {btn:"warning", msg:"提交下一级",    name:"客服"},
    autoTransfer:   {btn:"danger",  msg:"自动提交时间",  name:"客服"},
    inProcess:      {btn:"info",    msg:"处理中",        name:"客服"},
    solved:         {btn:"success", msg:"已解决",        name:"客服"},
    waitForConfirm: {btn:"primary", msg:"等待确认",      name:"用户"},
    confirmed:      {btn:"success", msg:"用户已确认",    name:"用户"},
}
function setFlowState(){
    unitNum=Math.floor(Math.random()*4)+2;
    let randBoolean=function(){return Math.round(Math.random());}
    isSolved=randBoolean();isConfirmed=(isSolved ? randBoolean() : 0);
    function getButtonColor(index){
        if(index===0)return processState.submit;
        if(index>0) return (Math.random()<0.5)? processState.manualTransfer : processState.autoTransfer ;
    }stateList=[];
    for(let i=0;i<unitNum;i++)stateList.push(getButtonColor(i));
    if(isSolved){
        stateList.push(processState.solved);
        if(isConfirmed){
            stateList.push(processState.confirmed);
        }else{
            stateList.push(processState.waitForConfirm);
        }
        unitNum+=2;
    }else{
        stateList.push(processState.inProcess);
        unitNum+=1;
    }//如果完成则增加用户单元
    showFlowState();
}
function showFlowState() {
    console.log(unitNum,["未解决","已解决"][isSolved],["未确认","已确认"][isConfirmed],stateList);//调试输出而已
}
function init_element(){
    diagram=document.createElement("dialog");
    diagram.classList.add("panel");diagram.setAttribute("id","EditBox");
    diagram.style.width="fit-content";
    let _elem=document.createElement("div");
    _elem.classList.add("panel_body");
    document.body.appendChild(diagram);
    diagram.appendChild(_elem);
}
function triangle(ctx,x,y,tri_w,tri_h,dir=0,color=null){
    let b_color=ctx.fillStyle;if(color!=null)changeColor(ctx,color);
    ctx.beginPath();
    let towards=[
        [-tri_w,-tri_h,-tri_w,+tri_h],
        [-tri_h,+tri_w,+tri_h,+tri_w],
        [+tri_w,-tri_h,+tri_w,+tri_h],
        [-tri_h,-tri_w,+tri_h,-tri_w],
    ]
    ctx.moveTo(x+towards[dir][0],y+towards[dir][1]);
    ctx.lineTo(x,y);
    ctx.lineTo(x+towards[dir][2],y+towards[dir][3]);
    ctx.fill();ctx.stroke();
    ctx.beginPath();
    changeColor(ctx,b_color);
}
function changeColor(ctx,c){
    ctx.strokeStyle=c;ctx.fillStyle=c;
}